﻿@page "/components/container"

<DocsPage>
    <DocsPageHeader Title="Container">
        <Description>A simple component to center content. Choose between fluid or fixed.</Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Fluid">
                <Description>You can set the max width with the <CodeInline>MaxWidth</CodeInline> enum.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ContainerFluidExample">
                <ContainerFluidExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Fixed">
                <Description>With the <CodeInline>Fixed</CodeInline> property set to true the container will "snap" to the closest breakpoint.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ContainedFixedExample">
                <ContainedFixedExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
